(function(window, undefined) {
    if (!CLASS) {
        var CLASS = {
            URL: "https://www.easy-mock.com/mock/5cf5fdc140851e4067ffd5bd/care/list/vue",
            table_head: "",
            table_content: ""
        };
    }
    //Index构造函数
    var Index = function(opt) {
        this.config(opt);
        this.table_head = document.querySelectorAll(CLASS.table_head); //头部信息
        this.table_content = document.getElementById(CLASS.table_content)
        this.init()
    }
    //存储初始化数据
    Index.option = {
        head_message: [],
        user_list: [],
    };
    Index.prototype = {
            constructor: Index,
            //设置
            config: function(opt) {
                if (!opt) return CLASS;
                for (var key in opt) {
                    CLASS[key] = opt[key];
                }
                return this;
            },
            // 初始化
            init: function() {
                this.getInitMessage();
                var last_active_node;
                ;[].forEach.call(this.table_head, (item, index) => {
                    item.parentNode.onclick = () => {
                        console.log(index);
                        last_active_node && (last_active_node.classList.remove("active"))
                        item.parentNode.classList.add("active");
                        last_active_node = item.parentNode;
                        this.getInitMessage(index);  //此处应填写请求的参数
                    }
                })
                return this
            },
            //加载页面时请求数据request_index  表示参数
            getInitMessage: function(request_index) {
                this.get(CLASS.URL).then(data => {
                    this.drew(data)
                })
            },
            //发送get请求
            get: function(url, obj) {
                return axios.get(url, {
                        params: obj
                    })
                    .then(response => {
                        return response.data;
                    })
                    .catch(e => console.log(e));
            },
            //发送post请求
            post: function(url, obj) {
                return axios.post(url, {
                        params: obj
                    })
                    .then(response => {
                        console.log(response)
                        var data = response.data

                    })
                    .catch(e => console.log(e));
            },
            //渲染画面
            drew: function(data) {
                var createDom = function(data) {
                    var state_1_strmodel = 
                    '\<div class=\'state-1 state-box clearfix\'>\
                           <div class=\'item\'>已取消订单</div>\
                    </div>\
                    ';
                    var state_2_strmodel = 
                    '\<div class=\'state-2 state-box clearfix\'>\
                            <div class=\'item\'>资料提交中</div>\
                            <div class="item" style="background-color: #F6506C;">编辑病例资料</div>\
                    </div>\
                    ';
                    var state_3_strmodel = 
                        '\<div class=\'state-3 state-box clearfix\'>\
                                <div class=\'item\'>治疗中</div>\
                                <div class=\'item\' style=\'background-color: #36A3F7;\'>发起复诊</div>\
                        </div>\
                        ';
                    var state_4_strmodel =
                        '\<div class=\'state-4 state-box clearfix\'>\
                                <div class=\'item\'>报告已上传，待医生确定制作矫治器（建议：***）</div>\
                                <div class=\'item\' style=\'background-color: #36A3F7;\'>确定制作矫治器</div>\
                                <div class=\'item\' style=\'background-color: #FFB922;\'>查看报告</div>\
                        </div>\
                        ';
                    switch (~~data.user_state) {
                        case 1:
                            data.user_state = state_1_strmodel
                            break;
                        case 2: 
                            data.user_state = state_2_strmodel
                            break;
                        case 3:
                            data.user_state = state_3_strmodel;
                            break;
                        case 4: 
                            data.user_state = state_4_strmodel
                            break;
                    }
                    return data;
                }
                for (var key in data) {
                    Index.option[key] = data[key];
                }
                for (var i = 0; i < Index.option.head_message.length; i++) {
                    this.table_head[i].innerHTML = Index.option.head_message[i]
                }
                // 打印接受收的用户信息
                for (var i = 0; i < Index.option.user_list.length; i++) {
                    console.log(Index.option.user_list[i])
                    Index.option.user_list[i] = createDom(Index.option.user_list[i]);
                }
                // 显示数据
                // console.log(Index.option);
                var html = template('test', Index.option);
                this.table_content.innerHTML = '';
                this.table_content.innerHTML = html;
            },
        },
        !window.Index && (window.Index = Index);
})(window, undefined)
